<template>
	<view class="Localmain">
		<view class="Localtop">
			<view class="left">
				<van-dropdown-menu>
					<van-dropdown-item :value="value1" :options="option1" />
				</van-dropdown-menu>
			</view>
			<view class="right">
				<input type="text" value="" :placeholder="val" @input="onInput" />
				<image @click="toosearch" class="searchlogo" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/search.png"
				 mode=""></image>
			</view>
		</view>
		<view class="Localcontent">
			<view v-for="item in shopList" :key="item.id" class="container" @click="go(item.id)">
				<image class="shopimg" :src="item.logo" mode=""></image>
				<view class="word">
					<text class="name">{{item.merchantName}}</text>
					<view class="star">
						<view style="margin-right: 15rpx;">
							<uni-rate :size="22" :readonly="true" :value="item.averageScore" />
						</view>
						<view class="about">
							<text style="color: #FFB31A;font-size: 24rpx;margin-left: 20rpx;">{{item.averageScore}} 分</text>
							<text style="color: #111111;font-size: 24rpx;margin-left: 25rpx;">{{item.commentNum}} 评价</text>
						</view>
					</view>

					<view class="wordtype">
						<view class="type">
							<text>种类多</text>
						</view>
						<view class="type">
							<text>干净</text>
						</view>
					</view>
					<view class="worddistance">
						<text style="color: #1A1A1A;font-size: 24rpx;">{{item.distance}}m</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Page from '../../common/page';
	export default {
		data() {
			return {
				option1: [{
						text: '距离近远',
						value: 0
					},
					{
						text: '评论数高低',
						value: 1
					},
					{
						text: '月售高低',
						value: 2
					}
				],
				value1: 0,
				shopList: [],
				value2: "",
				val: '',
			}
		},
		onLoad(option) {
			this.val = option.val
			console.log(this.val)
			this.getShop()
		},

		methods: {
			getShop() {
				// 请求数据
				const requestSearch = {
					url: `/api/commodity/selectLikeCommodity`,
					method: "post",
					data: {
						vid: 1,
						content: this.val,
						longitude: 104.876555555,
						latitude: 30.10987652,
						distance: 50000000,
						current: 1,
						size: 10,
						sort: 0
					},
					callBack: (res) => {
						if (res.code == 200) {
							console.log(res);
							this.text = 'request success';
							this.shopList = res.data.records
						}
					}
				}
				this.$http.request(requestSearch, true)
			},

			toosearch() {
				uni.showLoading({
					icon: 'none',
					title: "加载..."
				})
				// 当前页面搜索请求数据
				const requestSeartoo = {
					url: `/api/commodity/selectLikeCommodity`,
					method: "post",
					data: {
						vid: 1,
						content: this.value2,
						longitude: 104.876555555,
						latitude: 30.10987652,
						distance: 50000000,
						current: 1,
						size: 10,
						sort: 0
					},
					callBack: (res) => {
						uni.hideLoading()
						if (res.code == 200) {
							console.log(res);
							this.text = 'request success';
							this.shopList = res.data.records
						}
					}
				}
				this.$http.request(requestSeartoo, true)
			},

			go(id) {
				uni.setStorageSync(
					'vid', id
				)
				uni.navigateTo({
					url: './Hot?sid=' + id
				})
			},
			// 监听搜索框
			onInput(e) {
				console.log(e.detail.value)
				this.value2 = e.detail.value
				console.log(this.value2)
			},
		}
	}
</script>

<style>
	.van-dropdown-menu {
		margin-top: 17rpx;
	}

	.Localmain {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
	}

	.Localtop {
		width: 100%;
		height: 120rpx;
		border-bottom: 2px solid #F1F1F1;
		display: flex;
		flex-direction: row;
	}

	.Localtop .left {
		color: #000000;
		font-size: 28rpx;
		width: 200rpx;
		text-align: center;
		line-height: 120rpx;
	}

	.Localtop .right {
		position: relative;
		margin-top: 28rpx;
		margin-left: 12rpx;
	}

	.Localtop .right input {
		width: 450rpx;
		height: 64rpx;
		padding-left: 60rpx;
		border-radius: 32rpx;
		background-color: #E5E5E5;
		font-size: 24rpx;
		color: #666666;
	}

	.Localtop .right image {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 18rpx;
		left: 10rpx;
	}

	.container {
		width: 100%;
		height: 200rpx;
		border-bottom: 2px solid #F1F1F1;
		display: flex;
		flex-direction: row;
		padding: 28rpx 24rpx 26rpx 20rpx;
		position: relative;
	}

	.shopimg {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.word .name {
		color: #111111;
		font-size: 32rpx;
		font-weight: bold;
	}

	.star {
		margin: 12rpx 20rpx 12rpx 0;
		display: flex;
		flex-direction: row;
	}

	.star image {
		width: 40rpx;
		height: 40rpx;
	}

	.wordtype {
		flex-direction: row;
		display: flex;
		position: absolute;
		top: 185rpx;
	}

	.type {
		background-color: #FFEEE6;
		width: 112rpx;
		height: 40rpx;
		border-radius: 24px;
		color: #FF6633;
		font-size: 24rpx;
		line-height: 40rpx;
		margin-right: 10rpx;
		text-align: center;
	}

	.worddistance {
		position: absolute;
		top: 185rpx;
		right: 70rpx;
	}
</style>
